import { ReactElement, useRef, useEffect, useContext } from 'react'
import { Modal, Form, FormInstance } from 'antd'
import { Context } from '../../../../context'
import UnitNumberInput from '@components/unitNumberInput'

const { Item } = Form

interface Props {
  visible: boolean
  hide: () => void
}

function Main ({ visible, hide }: Props): ReactElement {
  const { updateCaseDetail, caseDetail } = useContext(Context)
  const formRef = useRef<FormInstance>(null)
  useEffect(() => {
    const c = formRef.current
    if (visible && caseDetail !== null && c !== null) {
      c.setFieldsValue({ counter_dispute_amount: caseDetail.counter_dispute_amount })
    } else if (!visible && c !== null) {
      c.resetFields()
    }
  }, [caseDetail, formRef, visible])
  return (
    <Modal title='修改反请求标的' visible={visible} onOk={() => formRef.current?.submit()} onCancel={hide} maskClosable>
      <Form ref={formRef} labelCol={{ flex: '108px' }} onFinish={d => updateCaseDetail(d)}>
        <Item name='counter_dispute_amount' label='反请求标的' rules={[{ required: true, message: '反请求标的不能为空' }]}>
          <UnitNumberInput placeholder='请输入' unit='元' precision={2} />
        </Item>
      </Form>
    </Modal>
  )
}

export default Main
